<template>
   <div class="swiper-container">
      <swiper :options="swiperOption" class="slider" v-if="sliderData.length>0">
        <swiper-slide class="swiper-slide" v-for="item in sliderData" :key="item.id">
          <img :src="item.src" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
export default {
  props:["sliderData"],
  data(){
    return{
      //轮播图相关配置
      swiperOption:{
        autoplay: { 
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        speed: 1000,
        pagination:{
          el:'.swiper-pagination',
          clickable:true,
        }
      },
    }
  },
}
</script>

<style lang="less" scoped>
  .swiper-slide{
      touch-action: none;
      img{
        width: 100%;
        display: block;
      }
    }
    .swiper-pagination{
      bottom: 0
    }
    .swiper-pagination-bullet-active{
      background: red
    }
    .swiper-pagination-bullet{
      opacity: 0.5;
    }
</style>